<template>
  <div class="app">
    <div class="top">
      <van-icon size="0.25rem" name="arrow-left" />
      <p>商品订单</p>
    </div>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <van-tabbar route v-model="active" :fixed="false">
      <van-tabbar-item @click="$router.push('/sentgoods/allgoods')"
        >全部</van-tabbar-item
      >
      <van-tabbar-item @click="$router.push('/sentgoods/waitSent')"
        >待发货</van-tabbar-item
      >
      <van-tabbar-item @click="$router.push('/sentgoods/acceptSentData')"
        >待收货</van-tabbar-item
      >
      <van-tabbar-item @click="$router.push('/sentgoods/waitcomment')"
        >待评价</van-tabbar-item
      >
    </van-tabbar>
    <router-view />
  </div>
</template>

<script>
import { allGoodsData } from "../request/api";
export default {
  data() {
    return {
      value: "",
      active: 0,
      allDataList: [],
      currentPage: 1,
    };
  },
  created() {
    allGoodsData({ current: 1, size: 5, keyword: "" }).then((res) => {
      console.log(res);
    });
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast("取消");
    },
  },
};
</script>
 
<style lang = "less" scoped>
.app {
  width: 100%;
  height: 100vh;
  background: #efefef;
  .top {
    color: white;
    position: relative;
    width: 100%;
    line-height: 0.5rem;
    background: #003399;
    text-align: center;
    p {
      font-size: 0.2rem;
    }
    .van-icon {
      position: absolute;
      top: 20%;
      left: 0;
    }
  }
  .van-tabbar {
    .van-tabbar-item {
      font-size: 0.16rem;
    }
  }
}
</style>